<template>
    <div>
        <Modal v-model="modal" title="确认操作" width="20" @on-ok="handleSubmit">
            <div style="text-align:center">
                <p>是否确认保存!</p>
            </div>
        </Modal>
        <Card class="line-style" >
            <div class="line-warp">
                <div class="line-main">
                    <Form   :label-width="100" >
                        <Row>
                            <Col span="7">
                                <Form-item label="批量设置时间" >
                                    <Select v-model="setTime"  @on-change="setBatchTime">
                                        <Option v-for="item in 23" :value="item" :key="item">{{ item }}时</Option>
                                    </Select>
                                </Form-item>
                            </Col>
                        </Row>
                    </Form>
                </div>
            </div>
        </Card>
        <Card class="line-style"  v-for="(item ,index) in warningList" :key="item.id">
            <div class="line-warp">
                <div class="line-main">
                    <Form :ref="'formCustom'+index" :model="item"  :label-width="100"  :rules="ruleCustom">
                        <Row>
                            <Col span="7">
                                <Form-item label="名称" prop="name">
                                    <i-input  v-model="item.name"  readonly/>
                                </Form-item>
                            </Col>
                            <Col span="7">
                                <Form-item label="预警时间" prop="warning">
                                    <Select v-model="item.warning" >
                                        <Option v-for="(time,index) in 23" :value="time" :key="index">{{ time }}时</Option>
                                    </Select>
                                </Form-item>
                            </Col>
                            <Col span="20">
                                <Form-item label="备注" prop="remarks">
                                    <i-input v-model="item.remarks" placeholder="请输入备注"/>
                                </Form-item>
                            </Col>
                            <Col  offset="1" span="1">
                                <div class="line-button">
                                    <Button type="primary" @click="openModal('formCustom'+index,index)"> 保存</Button>
                                </div>
                            </Col>
                        </Row>
                    </Form>
                </div>
            </div>
        </Card>

    </div>
</template>

<script>
import { findSchemaList, insert } from '@/api/outbreak-management/early-warning/early-warning'
// 预警设置
export default {
  name: 'addPage',
  data () {
    return {
      // 弹出框
      modal: false,
      formIndex: '',
      // 预警列表
      warningList: [],
      // 校验方式
      ruleCustom: {
        warning: [
          { required: true, type: 'number', message: '预警时间必选', trigger: 'blur' }
        ],
        remarks: [
          { required: true, message: '备注必填', trigger: 'blur' }
        ]
      },
      // 设置时间
      setTime: ''
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    // 校验
    openModal (name, index) {
      this.$refs[name][0].validate((valid) => {
        if (valid) {
          this.formIndex = index
          this.modal = true
        } else {
          this.$Message.error('表单验证失败,请检查后再试!')
        }
      })
    },
    // 设置批量时间
    setBatchTime () {
      let list = this.warningList
      let time = this.setTime
      list.forEach((item) => {
        item.warning = time
      })
      this.warningList = list
    },
    // 提交
    handleSubmit () {
      insert(this.warningList[this.formIndex]).then(res => {
        let errcode = res.data.errcode
        if (errcode === 0) {
          this.$Message.success('提交成功!')
        } else {
          this.$Message.error('提交失败!')
        }
      })
    },
    // 获取列表
    getList () {
      findSchemaList().then(res => {
        let { errcode, data } = res.data
        if (errcode === 0) {
          let list = []
          data.forEach(item => {
            let warning = item.warning ? item.warning : ''
            list.push({ name: item.name, warning: warning, remarks: item.remarks })
          })
          this.warningList = list
        } else {
          this.$Message.error('获取预警列表失败!')
        }
      })
    }
  }
}
</script>

<style scoped lang="less"></style>
